import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button, InputNumber, Affix } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';
import SeatMapModal from './components/SeatMapModal';
const FormItem = Form.Item;
const ProduceForm = (props) => {
    const { dispatch, visible = {}, onClose, handleCallback, loading, selectList } = props;
    const { show = false, detail = {} } = visible;
    const { id, seatConfig } = detail;
    const [form] = Form.useForm();
    const childRef = useRef(null)

    const fetchMenuEdit = () => {
        const seatConfig = childRef.current.getData()
        form.validateFields().then(async (values) => {
            dispatch({
                type: 'answering/fakeSaveCampusClassroom',
                payload: {
                    ...values,
                    seatConfig: seatConfig,
                    id
                },
                callback: () => {
                    onClose()
                    handleCallback()
                }
            })
        });
    };
    const formItems = [
        { label: '教室名称', name: 'classroomName', },
        {
            label: '校区',
            name: 'campusId',
            type: 'select',
            select: selectList,
            fieldNames: {
                label: 'campusName',
                value: 'id',
            }
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: {
                0: '禁用',
                1: '启用'
            }
        },
        {
            type: 'noForm',
            formItem: <FormItem
                key={'color'}
                name='color'
                required={true}
                rules={{ required: false }}
                label='座位排布'
            >
                <SeatMapModal detail={detail} show={show} cRef={childRef}></SeatMapModal>
            </FormItem>
        },

    ];

    const modalProps = {
        title: `${detail.id ? '编辑排班' : '新增排班'}`,
        visible: show,
        onClose,
        footer: (
            <Button type="primary" loading={loading} onClick={fetchMenuEdit}>
                确定
            </Button>
        ),
    };

    return (
        <DrawerCondition {...modalProps}>
            <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
        </DrawerCondition>
    );
};

export default connect(({ loading, }) => ({

    loading: loading.effects['answering/fakeSaveSchedule'],
}))(ProduceForm);
